<template>
	<div class="dashboard-content" style="">

		<el-form :inline="true" :model="ruleForm">
			<div class="dashboard-btn-wrap">
				<el-form-item label="商品名称">
					<el-input  v-model="ruleForm.productName" clearable style="width: 187px;"></el-input>
				</el-form-item>
				<el-form-item label="生产企业">
					<el-input  v-model="ruleForm.manufacturingEnterprise" clearable
						style="width: 187px;"></el-input>
				</el-form-item>
				<el-form-item label="日期" v-if="activeName != 1">
					<el-date-picker  v-model="time" type="daterange" :unlink-panels="true"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-form-item>
				<div></div>
				<template v-if="activeName != 2">
					<el-form-item label="购进渠道">
						<el-input  v-model="ruleForm.purchasingChannels" clearable
							style="width: 187px;"></el-input>
					</el-form-item>
					<el-form-item label="批准文号">
						<el-input  v-model="ruleForm.approvalNumber" clearable
							style="width: 187px;"></el-input>
					</el-form-item>
				</template>
				<el-form-item label="股东单位">
					<el-select  v-model="ruleForm.shareholderUnit" clearable placeholder="请选择"
						style="width: 187px;">
						<el-option v-for="item in primaryList" :key="item.value" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="崇盛豫编码">
					<el-input  v-model="ruleForm.primaryEncoding" clearable
						style="width: 187px;"></el-input>
				</el-form-item>
				<el-form-item>
                    <el-button style="background-color: #5CD8DA;border-color: #5CD8DA;padding: 10px 20px;" type="primary" @click="query()">查询</el-button>
				</el-form-item>
				<el-form-item>
                    <el-button style="background-color: #5CD8DA;border-color: #5CD8DA;padding: 10px 20px;" type="primary" 	@click="exportClick()">导出</el-button>
				</el-form-item>
			</div>
		</el-form>
		<div>
			<section>
				<template >
					<template >
					<el-table ref="multipleTable" :data="tableData[activeName].list" class="tableBox"
						style="width: 100%;"
						:header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" height="500px">
						<el-table-column type="index" label="序号" width="50"></el-table-column>
						<el-table-column label="崇盛豫编码" prop="primaryEncoding"></el-table-column>
						<el-table-column label="股东单位" prop="shareholderUnit"></el-table-column>
						<el-table-column label="库存机构（总部库/门店）" prop="inventoryOrganization"></el-table-column>
						<el-table-column label="商品ID" prop="productId"></el-table-column>
						<el-table-column label="商品名称" prop="productName"></el-table-column>
						<el-table-column label="规格" prop="specifications"></el-table-column>
						<el-table-column label="生产企业" prop="manufacturingEnterprise"></el-table-column>
						<el-table-column label="购进渠道" prop="purchasingChannels"></el-table-column>
						<el-table-column label="批准文号" prop="approvalNumber"></el-table-column>
						<el-table-column label="采购员" prop="purchaser"></el-table-column>
						<el-table-column label="进价" prop="purchasePrice"></el-table-column>
						<el-table-column label="零售价" prop="retailPrice"></el-table-column>
						<el-table-column label="批号" prop="batchNumber"></el-table-column>
						<el-table-column label="有效期至" prop="validTo"></el-table-column>
						<el-table-column label="库存数量" prop="inventoryQuantity"></el-table-column>
						<el-table-column label="库存成本额" prop="inventoryCostAmount"></el-table-column>
						<el-table-column label="库存零售额" prop="inventoryRetailSales"></el-table-column>
						<el-table-column label="近180天动销数量" prop="salesVolumePastOne"></el-table-column>
						<el-table-column label="近90天动销数量" prop="salesVolumePastTwo"></el-table-column>
						<el-table-column label="近30天动销数量" prop="salesVolumePastThree"></el-table-column>
					</el-table>
				</template>
				</template>
				
				<div class="pageClass">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:page-size="tableData[activeName].pageSize" :current-page="tableData[activeName].pageNum"
						:page-sizes="[100, 200, 400, 800, 1500]" layout="total, sizes, prev, pager, next"
						:total="tableData[activeName].total">
					</el-pagination>
				</div>
			</section>
		</div>
	</div>
</template>

<script>
import axios from 'axios';
export default {
	data() {
		return {
			ruleForm: {
				productName: '',//商品名称
				manufacturingEnterprise: '',//生产企业
				startTime: '',//开始时间
				endTime: '',//结束时间
				purchasingChannels: '',
				approvalNumber: '',
				shareholderUnit: '',
				primaryEncoding: '',
				pageNum: '',
				pageSize: '',
			},
			time: [],
			tableData: [
				{
					pageNum: 1,
					pageSize: 100,
					total: 0,
					list: [],
				},
				{
					pageNum: 1,
					pageSize: 100,
					total: 0,
					list: [],
				},
				{
					pageNum: 1,
					pageSize: 100,
					total: 0,
					list: [],
				}
			],
			primaryList: [
				{ "name": "铁岭安康", "value": "tlak" },
				{ "name": "丹东百盛", "value": "ddbs" },
				{ "name": "心向民", "value": "xxm" },
				{ "name": "国益堂", "value": "gyt" },
				{ "name": "仁泽康桥", "value": "rzkq" },
				{ "name": "凌源星河", "value": "lyxh" },
				{ "name": "百合", "value": "bh" },
				{ "name": "本溪城镇", "value": "bxcz" },
				{ "name": "襄元堂", "value": "xyt" },
				{ "name": "建昌医药", "value": "jcyy" },
				{ "name": "白求恩", "value": "bqe" },
				{ "name": "岫岩国泰", "value": "xygt" },
				{ "name": "溥安堂", "value": "pat" },
				{ "name": "益君堂", "value": "yjt" },
				{ "name": "民生堂", "value": "mst" },
				{ "name": "心心向民", "value": "xxxm" },
				{ "name": "沈阳文泰", "value": "sywt" },
				{ "name": "阳光新华", "value": "ygxh" },
				{ "name": "电信", "value": "dx" }
			],

			activeName: 1,
			fullscreenLoading: false,
		};
	},
	methods: {
		query() {
			// if (!this.ruleForm.productName && !this.ruleForm.manufacturingEnterprise) {
			// 	this.$message.warning({ message: '商品名称和生产企业不能同时为空!' })
			// 	return
			// }
			if (this.time) {
				this.ruleForm.startTime = this.time[0];
				this.ruleForm.endTime = this.time[1];
			} else {
				this.ruleForm.startTime = '';
				this.ruleForm.endTime = '';
			}
			// let start = new Date(this.ruleForm.startTime).getTime()
			// let end = new Date(this.ruleForm.endTime).getTime()
			// if (end - start > 24 * 60 * 60 * 1000 * 4) {
			// 	this.$message.warning({ message: '间隔时间不能大于五天' })
			// 	return
			// }
			let url = ''
			if (this.activeName == 0) url = '/find/rk';
			if (this.activeName == 1) url = '/find/kc';
			if (this.activeName == 2) url = '/find/mdxs';
			this.ruleForm.pageNum = this.tableData[this.activeName].pageNum;
			this.ruleForm.pageSize = this.tableData[this.activeName].pageSize;
			this.fullscreenLoading = true;
			axios.defaults.timeout = 1000 * 60 * 60 * 5;
			axios.post(window.PLATFROM_CONFIG.url + url, this.ruleForm).then(res => {
				if (res.data.code == 200) {
					this.tableData[this.activeName].list = res.data.data.records;
					this.tableData[this.activeName].total = res.data.data.total;
					this.fullscreenLoading = false;
				} else {
					this.fullscreenLoading = false;
				}
			}).catch(res => {
				this.$message({
					duration: 0,
					showClose: true,
					message: '处理失败，请稍后重试',
					type: 'error'
				});
				this.fullscreenLoading = false;
			})
		},
		exportClick() {
			// if (!this.ruleForm.productName) {
			// 	this.$message.warning({ message: '请输入商品名称' })
			// 	return
			// }
			// if (this.time.length == 0 && this.activeName != 1) {
			// 	this.$message.warning({ message: '请选择日期' })
			// 	return
			// }
			if (this.time) {
				this.ruleForm.startTime = this.time[0];
				this.ruleForm.endTime = this.time[1];
			} else {
				this.ruleForm.startTime = '';
				this.ruleForm.endTime = '';
			}

			let link = ''
			if (this.activeName == 0) link = '/find/rkExport?json=';
			if (this.activeName == 1) link = '/find/kcExport?json=';
			if (this.activeName == 2) link = '/find/mdxsExport?json=';
			var Json = JSON.stringify(this.ruleForm)
			const url = window.PLATFROM_CONFIG.url + link + Json;
			window.open(url, '_blank');
			this.$message.success('导出成功');
		},
		handleClick(tab, event) {
			this.activeName = tab.name;
		},
		handleSizeChange(val) {
			this.tableData[this.activeName].pageSize = val;
			this.query()
		},
		handleCurrentChange(val) {
			this.tableData[this.activeName].pageNum = val;
			this.query()
		},
	}
}
</script>

<style scoped>
.dashboard-content {
	background: #fff;
    padding: 20px;
     margin: 30px 25px;

}

.dashboard-btn-wrap {
	text-align: left;
	padding: 10px 0;
}

.dashboard-button {
	width: 80px;
}

.pageClass {
	text-align: center;
	padding: 20px 0;
}
</style>